<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Base64转换器</title>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
    <style>
      body {
        margin: 0;
      }
      .wrap {
        height: 100vh;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      textarea {
        width: 50%;
        height: 100vh;
        box-sizing: border-box;
        padding: 20px;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 1px;
        background: #ecf0f1;
        resize: none;
        border: 2px solid #bdc3c7;
      }
      textarea:focus {
        outline: none;
        border: 2px solid #1abc9c;
      }
      .middle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
      }
      button {
        padding: 10px;
      }
      #left {
        color: #2c3e50;
      }
      #right {
        color: #16a085;
      }
      @media screen and (max-width: 700px) {
        textarea {
          flex-shrink: 0;
          width: 100%;
          height: 50vh;
        }
        .middle {
          transform: translateX(-50%) rotate(180deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <textarea name="left" id="left" placeholder="原始字符串"></textarea>
      <div class="middle">
        <button onClick="encodeStr()">↑</button>
        <button onClick="decodeStr()">↓</button>
      </div>
      <textarea name="right" id="right" placeholder="Base64字符串"></textarea>
    </div>
    <!-- 使用了js-base64插件，支持中文转换 -->
    <!-- <script src="js-base64.js"></script> -->
    <script>
      // 非常全面的教程：
      // https://blog.csdn.net/qq_42961150/article/details/121922216
      let leftDom = document.querySelector("#left");
      let rightDom = document.querySelector("#right");
      function encodeStr() {
        // JS内置方法
        rightDom.value = window.btoa(unescape(encodeURIComponent(leftDom.value)));
        // 插件方法
        // rightDom.value = Base64.encode(leftDom.value);
      }
      function decodeStr() {
        // JS内置方法
        leftDom.value = decodeURIComponent(escape(window.atob(rightDom.value)));
        // 插件方法
        // leftDom.value = Base64.decode(rightDom.value);
      }
    </script>
  </body>
</html>
